<template>
    <div class="registerTwo">
        <div class="moduleHead">
            <router-link :to="{ name: 'registerOne' }">
                <span class="back"></span>
            </router-link>
            <span>{{language.unify_welcome}}</span>
        </div>
        <div class="body">
            <div class="select_warapper">
                <div class="line_select_box">
                    <label>{{language.unify_age}}</label>
                    <select v-model="age" dir="rtl" @blur="blurSelect('age')" @change="changeSelect()">
                        <option v-for="item in ageList" :value="item">{{item}}</option>
                    </select>
                </div>
                <div class="line_select_box">
                    <label>{{language.unify_ethnicity}}</label>
                    <select v-model="ethnicity" dir="rtl" @blur="blurSelect('ethnicity')" @change="changeSelect()">
                        <option v-for="item in ethnicityList" :value="item.value">{{item.label}}</option>
                    </select>
                </div>
                <div class="line_select_box">
                    <label>{{language.unify_country}}</label>
                    <select v-model="r_country" dir="rtl" @change="changeSelect()">
                        <option v-for="item in countryList" :value="item.value">{{item.label}}</option>
                    </select>
                </div>
                <div class="line_select_box" v-if="showState">
                    <label>{{language.unify_state}}</label>
                    <select v-model="r_state_id" dir="rtl" @change="changeSelect()">
                        <option v-for="item in stateList" :value="item.value">{{item.label}}</option>
                    </select>
                </div>
                <div class="line_input_box" v-if="showZip">
                    <label name="r_zip" v-validate="'required'" :class="{'validate-error-color': hasValidateError('r_zip')}"><span v-if="hasValidateError('r_zip')">{{getValidateError('r_zip')}}</span><span v-else>{{language.unify_zipCode}}</span></label>
                    <input name="r_zip" v-model="r_zip" maxlength=10 spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" type="text" @input="inputText">
                </div>
            </div>
            <div class="button_warapper">
                <router-link :to="{ name: 'registerThree' }">
                    <button class="btn btn_nextStep" :class="{opacity: opacity}">
                        <loading :props="{show:loading,type:'btn'}"></loading>
                        {{language.unify_continue}}
                    </button>
                    <!-- <button class="btn btn_nextStep btn_disabled"> Continue </button> -->
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
import storeDataPartMixin from '../common/storeDataPartMixin'
import * as API from '../api';
import validationMixin from '../plugins/my-validate';
import loading from './Loading'

export default {
    name: 'registerTwo',

    mixins: [validationMixin, storeDataPartMixin],

    components: {
        loading,
    },

    data() {
        return {
            age: '',
            ethnicity: '',
            r_country: 0,
            r_state_id: '',
            r_zip: '',
            countryList: [],
            stateList: [],
            showState: false,
            showZip: true,
            opacity: true,
            showDefault: true,
            loading: false,

        }
    },

    computed: {
        ageList: function() {
            let arr = [...Array(100).keys()].slice(18);
            return arr;
        },

        ethnicityList: function() {
            let list = JSON.parse(Unit.getLocalStorage('ms_ethnicity'));
            return list;
        },
    },

    watch: {
        r_country: function(newVal, oldVal) {
            if (!this.showDefault) {
                this.r_state_id = '';
                this.r_zip = '';
            }
            let tthis = this;
            if ([0, 31, 180].indexOf(parseInt(newVal)) > -1) {
                this.showZip = true;
                this.showState = false;
            } else {
                this.showZip = false;
                this.showState = true;
                API.get_state_list({
                    data: newVal,
                    success: function(result) {
                        tthis.stateList = result.concat([{
                            value: '',
                            label: 'Anywhere'
                        }]);
                        tthis.showDefault = false;
                    }
                })
            }
            this.updateBtn();
        }
    },

    created() {
        this.getCountryList();
        let regData = JSON.parse(Unit.getSessionStorage('ms_register_data')) || {};
        this.age = regData.age || '';
        this.ethnicity = regData.ethnicity || '';
        this.r_country = regData.r_country || 0;
        this.r_state_id = regData.r_state_id || '';
        this.r_zip = regData.r_zip || '';
        if ([0, 31, 180].indexOf(parseInt(this.r_country)) > -1) {
            this.showZip = true;
            this.showState = false;
        } else {
            this.showZip = false;
            this.showState = true;
        }
    },

    activated() {
        this.updateBtn();
    },

    methods: {

        blurSelect(type) {
            if (!this.age && type == 'age') {
                this.age = '18';
            } else if (!this.ethnicity && type == 'ethnicity') {
                this.ethnicity = '2';
            }
        },

        changeSelect() {
            this.updateBtn();
        },

        inputText() {
            this.updateBtn();
        },

        handleUpdateBtnData() {
            let checkData = [this.age, this.ethnicity, this.r_country];
            if ([0, 31, 180].indexOf(parseInt(this.r_country)) > -1) {
                checkData.push(this.r_zip);
            } else {
                checkData.push(this.r_state_id);
            }
            return checkData;
        },

        updateBtn() {
            let checkData = this.handleUpdateBtnData();
            for (let i in checkData) {
                if (checkData[i].toString() == '') {
                    this.opacity = true;
                    return;
                }
            }
            this.opacity = false;
        },

        getCountryList() {
            let tthis = this,
                data = JSON.parse(Unit.getLocalStorage('ms_country_list')) || {};
            if (_.isEmpty(data)) {
                API.get_country_list({
                    success: function(result) {
                        Unit.setLocalStorage('ms_country_list', JSON.stringify(result));
                        tthis.countryList = result;
                    }
                });
            } else {
                tthis.countryList = data;
            }
        },

        handleRegData() {
            let regData = Unit.getObjSessionStorage('ms_register_data') || {};
            regData.age = this.age;
            regData.ethnicity = this.ethnicity;
            regData.r_country = this.r_country;
            if (this.showZip) {
                regData.r_zip = this.r_zip;
                regData.r_state_id = '';
            } else {
                regData.r_zip = '';
                regData.r_state_id = this.r_state_id;
            }
            return regData;
        },

        saveRegData() {
            Unit.setSessionStorage('ms_register_data', JSON.stringify(this.handleRegData()));
        }
    },

    beforeRouteLeave(to, from, next) {
        let tthis = this;
        if (to.name == 'registerThree') {
            if (this.showZip) {
                if (this.r_zip) {
                    this.loading = true;
                    API.check_zip({
                        data: {
                            r_country: this.r_country,
                            r_zip: this.r_zip
                        },
                        success: function(result) {
                            tthis.loading = false;
                            if (result.errcode) {
                                tthis.changeCacheFields('r_zip', {
                                    errorCode: 2,
                                    errormsg: result.errmsg
                                });
                                next(false)
                            } else {
                                tthis.changeCacheFields('r_zip', {
                                    errorCode: 0,
                                    errormsg: ''
                                });
                                tthis.saveRegData();
                                next();
                            }
                        }
                    })
                } else {
                    next(false)
                }

            } else {
                tthis.loading = true;
                tthis.saveRegData();
                setTimeout(function() {
                    tthis.loading = false;
                    next()
                }, 100)
            }
        } else {
            next()
        }
    }

}

</script>
<style scoped>
.registerTwo {
    padding-top: 44px;
    background: #f7f7f7;
}

.registerTwo .select_warapper {
    margin-top: 30px;
    background: #fff;
}

.registerTwo .line_input_box:last-child,
.registerTwo .line_select_box:last-child {
    border-bottom: none;
}

.registerTwo .line_select_box,
.registerTwo .line_input_box {
    position: relative;
    font-size: 15px;
    min-height: 48px;
    line-height: 48px;
    margin-left: 20px;
    color: #646464;
    border-bottom: 1px solid #e8e7e9;
    overflow: hidden;
}

.registerTwo .line_input_box input {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% - 34px);
    padding-right: 34px;
    text-align: right;
    color: #282828;
    border: none;
    background: none;
    font-size: 16px;
}

.registerTwo .line_select_box select {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 15px;
    line-height: 48px;
    color: #282828;
    text-align: right;
    border: none;
    background: none;
    padding-right: 28px;
}

.registerTwo .line_select_box::after,
.registerTwo .line_select_box::before {
    position: absolute;
    top: 50%;
    right: 13px;
    margin-top: -7px;
    content: '';
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #c7c7cc;
}

.registerTwo .line_select_box::after {
    right: 15px;
    border-left-color: #fff;
}

.registerTwo .button_warapper {
    padding: 44px;
    text-align: center;
}

.registerTwo .button_warapper .btn_nextStep {
    width: 80%;
}

.registerTwo .line_select_box .multiple {
    height: 48px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9;
}

.registerTwo .line_select_box .multiple .multipleHtml {
    line-height: 48px;
    height: 48px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    color: #282828;
    font-size: 14px;
    text-align: right;
    padding: 0 28px 0 100px;
}

.registerTwo .line_select_box .multiple select {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

























































































































/*.registerTwo .button_warapper .btn_disabled{*/


/*}*/

.registerTwo .bottom_warapper {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
}

.registerTwo .opacity {
    background: #a5a5a5;
}

</style>
